<template>
    <template v-for='(item) in list'>
        <el-sub-menu
                v-if='item.child'
                :index='item.route'
                :key="item.id"
                popper-class="ea-menu-popper"
        >
            <template #title>
                <el-icon>
                    <i class="fa" :class="item.icon"></i>
                </el-icon>
                <span>{{item.name}}</span>
            </template>
            <!-- 调用自身  此处是重点-->
            <tree-menu :list='item.child'></tree-menu>
        </el-sub-menu>
        <!-- 如果没有子菜单，则显示当前内容 -->
        <el-menu-item
                v-else
                :index='item.route'
                :key='item.id'
        >
            <el-icon>
                <i class="fa" :class="item.icon"></i>
            </el-icon>
            <template #title>
                <span>{{item.name}}</span>
            </template>
        </el-menu-item>
    </template>
</template>
<script lang="ts">
    import {defineComponent} from "vue";

    export default defineComponent({
        name: "TreeMenu",
        //子组件通过props来接收数据：
        props: {
            list: {
                type: Array,
                default: () => []
            }
        }
    })
</script>
<style lang="scss">
    .ea-menu-popper {
          .el-menu-item {
            color: var(--ea-theme-font-color) !important;
            height: 3rem !important;
            line-height: 3rem !important;

            &:hover {
                background-color: var(--ea-theme-hover-color) !important;
            }
        }
    }
</style>
